<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
	<head>
		<link rel="stylesheet" type="text/css" href="css/maquetado.css"/>
		<link rel="stylesheet" type="text/css" href="css/styleFijo.css"/>
		<link rel="stylesheet" type="text/css" href="css/propiedad.css" />	
		<link rel="stylesheet" type="text/css" href="facebox/facebox.css">		
	</head>
	<body>
		<?php
			include('handler_bd.php');
			$id = $_GET['propId'];
			$prop = $conn->query("SELECT * FROM Propiedades WHERE id=$id")->fetch();
			$imgs =	$conn->query("SELECT * FROM Imagenes WHERE idProp=$id");
			$cat  = $conn->query("SELECT * FROM Categorias WHERE id=$prop[idCat]")->fetch();
			$op  = $conn->query("SELECT * FROM Operaciones WHERE id=$prop[idOp]")->fetch();
			
			$relacionadas = $conn->query("SELECT * FROM Relacionadas INNER JOIN Propiedades
										  ON Propiedades.id = relacionada WHERE propiedad = $id");
		?>
		
		<div id="idProp" style="display:none"><?php echo $_GET['propId']?></div>
		<div id="popup-prop" class="pp">			
			<div id="popup-titulo">
				<?php
					echo "<span id='popup-titulo-tipo'>$cat[nombre]</span> - "; 
					echo "<span id='popup-titulo-dir'>$prop[direccion]</span>";
				?>
			</div>
			<br />			
			<div id="popup-galeria">
				<div class="bxslider" id="popup-gal-lista">				
					<?php					
						foreach($imgs as $img){
							echo "<img class='popup-thumb' src='$img[path]' title='$img[nombre]' alt='$img[alt]' />";
						}
					?>				
				</div>				
			</div>
			<div align="center" id="popup-img">
				<!--rellenado desde propiedad.js-->
			</div>	
			<div id="content-container" style="width: 800px">
				<div id="popup-descDetalles">					
					<div id="popup-detalles">					
							<table id="popup-detalles-tabla">
								<tr>
									<td class="popup-tabla-izq">Precio</td>
									<td>
										<?php
											echo "<span class='popup-tabla-der'>\${$prop['precio']}.-</span>";
										?>
									</td>
								</tr>
								<tr>
									<td class="popup-tabla-izq">Direccion</td>
									<td>
										<?php
											echo "<span class='popup-tabla-der'>$prop[direccion]</span>";
										?>
									</td>
								</tr>
								<tr>
									<td class="popup-tabla-izq">En:</td>
									<td>
										<?php
											echo "<span class='popup-tabla-der'>$op[nombre]</span>";
										 ?>
									</td>
								</tr>
								<tr>
									<td class="popup-tabla-izq">Categoria</td>
									<td>
										<?php
											echo "<span class='popup-tabla-der'>$cat[nombre]</span>";
										 ?>
									</td>
								</tr>
								<tr>
									<td class="popup-tabla-izq">Habitaciones</td>
									<td>
										<?php
											echo "<span class='popup-tabla-der'>$prop[dormitorios]</span>";
										?>
									</td>
								</tr>
								<tr>
									<td class="popup-tabla-izq">Antiguedad</td>
									<td>
										<?php
											echo "<span class='popup-tabla-der'>$prop[antiguedad]</span>";
										 ?>
									</td>
								</tr>
							</table>
						</div>	
						<br />			
						<div id="popup-descripcion">				
								<?php
									echo "<span >$prop[descripcion]</span>";
								?>
						</div>
					</div>					
					<div id="googleMap" style="width:50%;height:280px;"></div>
					<br />
					<div id="propRelacionadas">
						<span id='popup-titulo-tipo'>Propiedades Relacionadas</spam>
						<ul>
						<?php 
							foreach($relacionadas as $rel):
						?>
						<li>
							<a href="/inmobiliaria/index.php?propId=<?php echo $rel['relacionada'] ?>">
								<?php echo $rel['direccion'] ?>
							</a>
						</li>
						<?php endforeach; ?>
						</ul>
					</div>					
				</div>
				<br />
				<div class="fb-like" data-href="http://localhost/inmobiliaria/index.php?propId=<?php echo $id?>" data-send="false" data-width="450" data-show-faces="true" data-action="like"></div>
				<br />
				<div id="fb-comments" align="center">
					<div class="fb-comments" data-href="http://localhost/inmobiliaria/index.php?propId=<?php echo $id?>" data-width="470" data-num-posts="10"></div>
				</div>		
		</div>
		<script src="js/propiedad.js" type="text/javascript"></script>		
		<script src="js/fbComments.js" type="text/javascript"></script>
		<script>		
			$(document).bind('reveal.facebox',initialize());
			function initialize(){
				var mapProp = {
			 		center:new google.maps.LatLng(51.508742,-0.120850),
			  		zoom:16,
			  		mapTypeId:google.maps.MapTypeId.ROADMAP
			  };			 
			var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
			
			geocoder = new google.maps.Geocoder();
			var address = "<?php echo "Bahia Blanca, "; echo $prop['direccion'] ?>";
			geocoder.geocode({'address': address}, function(results,status){
				if(status == google.maps.GeocoderStatus.OK){
					map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
			            map: map,
			            position: results[0].geometry.location
			        });
				}	
				else{
					alert("Google falló: "+status);
				}
			});
			}
		</script>	
	</body>
</html>